<template>
    <div id="classlist">

        <img src="img/class05.png" alt="" v-if="this.datlist == ''">

        <div v-else class="classlist-detail">
            <div 
                class="item_class_image"
                v-for="(item,index) in datlist" 
                :key="index" 
                @click="goClassDetail(item.id)"> 
                <img :src="item.pic" alt="">
                <div>{{item.name}}</div>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            datlist:[],
            List:[],
        }
    },
    mounted() {
        var id = this.$route.query.id;
        // 商品列表
        this.$API.getStoreList().then(res=>{
            console.log(res)
            this.List = res.data.data;
            this.List.map(item=>{
                if(item.categoryId == id){    // categoryId:分类编号 | 类别
                    this.datlist.push(item);
                }
            })
        });
    },
    methods: {
        // 点击 进入详情页
        goClassDetail(id){
            console.log(id);
            this.$router.push({
                path:'/CartDetail',
                query:{
                    id,
                }
            });
        }
    },
}
</script>

<style lang="scss">
#classlist{
    width:100%;
    height:100%;
    font-size: 0.26rem;
    img{
        width:100%;
        height:100%;
    }
    .classlist-detail{
        width:100%;
        height:100%;
        .item_class_image{
            width:46.5%;
            margin-left:0.15rem;
            position: relative;
            display: inline-flex;
            img{
                width: 100%;
            }
            div{
                width:100%;
                padding:0.15rem 0;
                color:#B69B72;
                background-color: #F0EDD4;
                white-space: nowrap; //强制不换行
                overflow: hidden; //超出部分隐藏
                text-overflow: ellipsis; //显示‘...’
                position: absolute;
                left: 0;
                bottom: 0.14rem;
                z-index: 999;
            }
        }
    }
}
</style>